<template>
  <div class="course-list">
    <van-tabs
      v-model:active="activeTab"
      background="#e7effd"
      title-active-color="#4a77ff"
      title-inactive-color="#666"
      line-height="3"
      sticky
    >
      <van-tab title="课程资源库">
        <div
          class="tab-body"
          v-if="courseSystemList && courseSystemList.length > 0"
        >
          <div class="cards">
            <div
              v-for="(item, index) in courseSystemList"
              :key="index"
              class="card"
              @click="enterDetails(item)"
            >
              <div class="cover">
                <img :src="item.iconPath" alt="" />
                <div class="badge" v-if="item.ownCourse">
                  <van-icon name="contact-o" /> 我的
                </div>
              </div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="tab-body" v-else>
          <div class="empty">暂无课程</div>
        </div>
      </van-tab>
      <van-tab title="我的课程">
        <div class="tab-body" v-if="myCourseList && myCourseList.length > 0">
          <div class="cards">
            <div
              v-for="(item, index) in myCourseList"
              :key="index"
              class="card"
              @click="enterDetails(item)"
            >
              <div class="cover">
                <img :src="item.iconPath" alt="" />
                <div class="badge" v-if="item.ownCourse">
                  <van-icon name="contact-o" /> 我的
                </div>
              </div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="tab-body" v-else>
          <div class="empty">暂无课程</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      directionId: "",
      courseSystemList: [],
      myCourseList: [],
    };
  },
  created() {
    this.getDirectionId();
  },
  methods: {
    // 获取专业方向
    getDirectionId() {
      this.$axios.get(`/tes/unauthorized/index`).then((res) => {
        if (res.code == 200) {
          this.directionId = res.data.directions[0].id;
          this.getCourseList();
          this.getMyCourseList();
        }
      });
    },

    // 获取课程列表
    getCourseList() {
      this.$axios
        .get(
          `/tes/unauthorized/index-course?directionId=${this.directionId}&coursePageSize=10000`
        )
        .then((res) => {
          if (res.code == 200) {
            this.courseSystemList = res.data.courses[0] || [];
          }
        });
    },

    // 获取我的课程列表
    getMyCourseList() {
      this.$axios
        .get(
          `/tes/unauthorized/index-course-owner?directionId=${this.directionId}&coursePageSize=10000`
        )
        .then((res) => {
          if (res.code == 200) {
            this.myCourseList = res.data.courses[0];
          }
        });
    },

    // 进入详情
    enterDetails(item) {
      this.$router.push("/courseDetails");
      localStorage.setItem("courseId", item.id);
      localStorage.setItem("courseName", item.name);
    },
  },
};
</script>

<style lang="scss" scoped>
.course-list {
  background: #e7effd;
  min-height: 100vh;
}

// ::v-deep(.van-tabs__wrap) {
//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
// }

.tab-body {
  padding: 12px 12px 16px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 12px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.cover {
  position: relative;
  height: 156px;
  border-radius: 8px;
  overflow: hidden;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #5b8cff;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.title {
  margin-top: 12px;
  font-size: 18px;
  color: #222;
  font-weight: 600;
}

.empty {
  padding: 24px;
  text-align: center;
  color: #999;
}
</style>
